<template>
  <div id="pie-container">
    <div class="d-flex pt-2 pl-2">
      <span style="color:#5cd9e8">
        <!-- <icon name="chart-bar"></icon> -->
      </span>
      <div class="d-flex">
        <span style="color:#5cd9e8">
          <icon name="chart-bar"></icon>
        </span>
        <span class="fs-xl text mx-2">监管情况统计</span>
      </div>
    </div>
    <div class="pie1" ref="pie1"></div>
  </div>
</template>

<script>
import {getInfo} from "@/api/login";
import {childlistUse} from "@/api/system/dept";

export default {
  name: 'pie1',
  props: {
    supervisedata: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  data() {
    return {
      city: '',
      isShow: false,
      open: false,
      cityData: [],
    }
  },
  /*watch() {
    fzwdata:Array
  },*/
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  created() {
   /* getInfo().then(response => {
      let deptCode = response.user.dept.deptCode;
      if (deptCode.length == 4) {//新区
        childlistUse(deptCode).then(response => {
          this.cityData = response.data;
        });
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    });*/
  },
  methods: {
    chooseArea() {
      this.open = true;
    },
    submit() {
      this.fatherMethod(this.city);
      this.open = false;
    },
    cancel() {
      this.open = false;
    },
    init() {
      let pie1 = this.$echarts.init(this.$refs.pie1);
      this.$watch('supervisedata', res => {
        this.supervisedata = res;
        let data = this.supervisedata;
        let color = '#fff';
        let xAxisData = [];
        let seriesData = [];
        let topData = [];
        let botData = [];
        // let sum = 0;
        let barTopColors = ['#B87757', '#2682B5', '#d6da36', '#5fb381', '#d37070'];
        let barBotColors = ['#FF7D34', '#2BB8F7', '#FAFF1D', '#5BF299', '#ec6565'];

        data.map((item) => {
          xAxisData.push(item.deptName);
          seriesData.push(item.doneNumber);
          // sum += item.value;
          topData.push(item.totalNumber);
          botData.push(1);
        });
        /* data.map(it => {
           topData.push(sum);
           botData.push(1);
         });*/

        let option = {
          // backgroundColor: color == '#fff' ? '#000' : '#fff',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            formatter: function (params, ticket, callback) {
              const item = params[2];
              return item.name + ' : ' + item.value;
            },
          },
          grid: {
            top: '5%',
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true,
          },
          /* title: {
             text: '🍳 家庭2021年收入支出统计',
             left: 'center',
             top: 20,
             textStyle: {
               color: '#FF0066',
             }
           },*/

          xAxis: {
            data: xAxisData,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: color,
                opacity: color == '#fff' ? 0.3 : 1,
              },
            },
            axisLabel: {
              show: true,
              margin: 10,
              interval: 0,
              rotate: (xAxisData.length > 3 ? -90 : 0),
              textStyle: {
                color: color,
                lineHeight: 18,
              },
              formatter: function (val) {
                let strs = val.split('');
                let str = '';
                for (let i = 0, s; (s = strs[i++]);) {
                  str += s;
                  if (!(i % 5)) str += '\n';
                }
                return str;
              },
            },
            interval: 0,
          },
          yAxis: {
            // name: "面积：㎡",
            nameTextStyle: {
              color: color,
              fontSize: 12,
            },
            splitLine: {
              show: color == '#fff' ? false : true,
              lineStyle: {
                color: color,
                opacity: 0.1,
              },
            },
            axisTick: {
              lineStyle: {
                color: color,
                opacity: color == '#fff' ? 0.3 : 1,
              },
            },
            axisLine: {
              lineStyle: {
                color: color,
                opacity: color == '#fff' ? 0.3 : 1,
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 12,
                color: color,
              },
            },
            splitNumber: 3,
          },
          series: [
            {
              name: '柱顶部',
              type: 'pictorialBar',
              symbolSize: [40, 10],
              symbolOffset: [0, -5],
              z: 16,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return barTopColors[params.dataIndex];
                  },
                },
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 14,
                fontWeight: 'bold',
                itemStyle: {
                  normal: {
                    color: function (params) {
                      return barBotColors[params.dataIndex];
                    },
                  },
                },
                formatter: function (params, index) {
                  // return ((params.value / sum) * 100).toFixed(1) + '%';
                  return params.value;
                },
              },
              symbolPosition: 'end',
              data: seriesData,
            },
            {
              name: '柱底部',
              type: 'pictorialBar',
              symbolSize: [40, 10],
              symbolOffset: [0, 5],
              z: 11,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return barBotColors[params.dataIndex];
                  },
                },
              },
              data: botData,
            },
            {
              type: 'bar',
              itemStyle: {
                normal: {
                  color: function (params) {
                    return barBotColors[params.dataIndex];
                  },
                  opacity: 0.4,
                },
              },
              z: 11,
              silent: true,
              barWidth: 40,
              barGap: '-100%', // Make series be overlap
              data: seriesData,
            },
            {
              name: '最上层立体圆',
              type: 'pictorialBar',
              symbolSize: [40, 10],
              symbolOffset: [0, -5],
              z: 13,
              itemStyle: {
                normal: {
                  color: color == '#fff' ? '#595D78' : '#E5E5E5',
                },
              },
              symbolPosition: 'end',
              data: topData,
            },
            {
              //上部立体柱
              stack: '1',
              type: 'bar',
              z: 9,
              itemStyle: {
                normal: {
                  color: color == '#fff' ? 'rgba(255,255,255,.1)' : '#F5F5F5',
                },
              },
              silent: true,
              barWidth: 40,
              barGap: '-100%', // Make series be overlap
              data: topData,
            },
          ],
        };

        pie1.setOption(option);
        window.addEventListener("resize", function () {
          pie1.resize();
        });
      });







      let data = this.supervisedata;
      let color = '#fff';
      let xAxisData = [];
      let seriesData = [];
      let topData = [];
      let botData = [];
      // let sum = 0;
      let barTopColors = ['#B87757', '#2682B5', '#d6da36', '#5fb381', '#d37070'];
      let barBotColors = ['#FF7D34', '#2BB8F7', '#FAFF1D', '#5BF299', '#ec6565'];

      data.map((item) => {
        xAxisData.push(item.deptName);
        seriesData.push(item.doneNumber);
        // sum += item.value;
        topData.push(item.totalNumber);
        botData.push(1);
      });
      /* data.map(it => {
         topData.push(sum);
         botData.push(1);
       });*/

      let option = {
        // backgroundColor: color == '#fff' ? '#000' : '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: function (params, ticket, callback) {
            const item = params[2];
            return item.name + ' : ' + item.value;
          },
        },
        grid: {
          top: '5%',
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true,
        },
        /* title: {
           text: '🍳 家庭2021年收入支出统计',
           left: 'center',
           top: 20,
           textStyle: {
             color: '#FF0066',
           }
         },*/

        xAxis: {
          data: xAxisData,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: color,
              opacity: color == '#fff' ? 0.3 : 1,
            },
          },
          axisLabel: {
            show: true,
            margin: 10,
            interval: 0,
            rotate: (xAxisData.length > 3 ? -90 : 0),
            textStyle: {
              color: color,
              lineHeight: 18,
            },
            formatter: function (val) {
              let strs = val.split('');
              let str = '';
              for (let i = 0, s; (s = strs[i++]);) {
                str += s;
                if (!(i % 5)) str += '\n';
              }
              return str;
            },
          },
          interval: 0,
        },
        yAxis: {
          // name: "面积：㎡",
          nameTextStyle: {
            color: color,
            fontSize: 12,
          },
          splitLine: {
            show: color == '#fff' ? false : true,
            lineStyle: {
              color: color,
              opacity: 0.1,
            },
          },
          axisTick: {
            lineStyle: {
              color: color,
              opacity: color == '#fff' ? 0.3 : 1,
            },
          },
          axisLine: {
            lineStyle: {
              color: color,
              opacity: color == '#fff' ? 0.3 : 1,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: color,
            },
          },
          splitNumber: 3,
        },
        series: [
          {
            name: '柱顶部',
            type: 'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, -5],
            z: 16,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColors[params.dataIndex];
                },
              },
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 14,
              fontWeight: 'bold',
              itemStyle: {
                normal: {
                  color: function (params) {
                    return barBotColors[params.dataIndex];
                  },
                },
              },
              formatter: function (params, index) {
                // return ((params.value / sum) * 100).toFixed(1) + '%';
                return params.value;
              },
            },
            symbolPosition: 'end',
            data: seriesData,
          },
          {
            name: '柱底部',
            type: 'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, 5],
            z: 11,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barBotColors[params.dataIndex];
                },
              },
            },
            data: botData,
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (params) {
                  return barBotColors[params.dataIndex];
                },
                opacity: 0.4,
              },
            },
            z: 11,
            silent: true,
            barWidth: 40,
            barGap: '-100%', // Make series be overlap
            data: seriesData,
          },
          {
            name: '最上层立体圆',
            type: 'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, -5],
            z: 13,
            itemStyle: {
              normal: {
                color: color == '#fff' ? '#595D78' : '#E5E5E5',
              },
            },
            symbolPosition: 'end',
            data: topData,
          },
          {
            //上部立体柱
            stack: '1',
            type: 'bar',
            z: 9,
            itemStyle: {
              normal: {
                color: color == '#fff' ? 'rgba(255,255,255,.1)' : '#F5F5F5',
              },
            },
            silent: true,
            barWidth: 40,
            barGap: '-100%', // Make series be overlap
            data: topData,
          },
        ],
      };

      pie1.setOption(option);
      window.addEventListener("resize", function () {
        pie1.resize();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
#pie-container {
  padding: 0.2rem;
  min-width: 2.5rem;
  border-radius: 0.0625rem;

  .text {
    color: #c3cbde;
    font-size: 0.2rem;
  }

  .pie1 {
    padding: 10px 10px;
    /* width: 80%; */
    width: 100%;
    //height: 3.75rem;
    height: 6.85rem;
    z-index: 9;
  }
}
</style>
